<template>
	<div class="container">
		<!--  选择栏-->
		<div class="top-icon">
			<!--      emoji图标-->
			<el-popover placement="top-end" trigger="click" width="450" @hide="handleHide">
				<template #reference>
					<div
						class="icon-box"
						@click="handleEmoji"
						@mouseover="emojiActive = true"
						@mouseout="emojiFlag ? '' : (emojiActive = false)"
					>
						<svg
							t="1690621072710"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="30103"
							width="25"
							height="25"
						>
							<path
								d="M515.328 965.2224c-249.9072 0-453.2224-203.3152-453.2224-453.2224s203.3152-453.2224 453.2224-453.2224 453.2224 203.3152 453.2224 453.2224-203.3152 453.2224-453.2224 453.2224z m0-845.0048c-216.0128 0-391.7824 175.7696-391.7824 391.7824s175.7696 391.7824 391.7824 391.7824 391.7824-175.7696 391.7824-391.7824-175.7696-391.7824-391.7824-391.7824z"
								:fill="emojiActive ? '#50abf8' : '#4F4F4F'"
								p-id="30105"
							></path>
							<path
								d="M385.8944 409.4976m-53.6064 0a53.6064 53.6064 0 1 0 107.2128 0 53.6064 53.6064 0 1 0-107.2128 0Z"
								:fill="emojiActive ? '#50abf8' : '#4F4F4F'"
								p-id="30106"
							></path>
							<path
								d="M636.8768 409.4976m-53.6064 0a53.6064 53.6064 0 1 0 107.2128 0 53.6064 53.6064 0 1 0-107.2128 0Z"
								:fill="emojiActive ? '#50abf8' : '#4F4F4F'"
								p-id="30107"
							></path>
							<path
								d="M510.208 708.1984c-122.88 0-183.7568-103.1168-186.3168-107.52a30.72 30.72 0 0 1 53.1456-30.8224c1.9968 3.3792 46.4896 76.9024 133.1712 76.9024 86.784 0 131.328-73.7792 133.1712-76.9024a30.78144 30.78144 0 0 1 41.984-11.008 30.6688 30.6688 0 0 1 11.1616 41.8304c-2.56 4.352-63.488 107.52-186.3168 107.52z"
								:fill="emojiActive ? '#50abf8' : '#4F4F4F'"
								p-id="30108"
							></path>
						</svg>
					</div>
				</template>
				<Emoji @selectEmoji="handleSelectEmoji"></Emoji>
			</el-popover>
			<!--      文件图标-->
			<el-upload
				:show-file-list="false"
				:on-exceed="handleExceed"
				:on-error="handleUploadError"
				:http-request="handleFileUpload"
			>
				<div class="icon-box" @mouseover="fileActive = true" @mouseout="fileFlag ? '' : (fileActive = false)">
					<svg
						t="1693530828320"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="5800"
						width="25"
						height="25"
					>
						<path
							d="M506 894.2a33 32.9 0 1 0 66 0 33 32.9 0 1 0-66 0Z"
							:fill="fileActive ? '#50abf8' : '#4F4F4F'"
							p-id="5801"
						></path>
						<path
							d="M864 388.7v-4.4c0-70.7-57.3-128-128-128H511.8l-82.5-110.9c-7.4-12.9-18-16.2-27.3-16l-0.1-0.1H192.1c-70.7 0-128 57.3-128 128v542.1c0 70.7 57.3 128 128 128H407v-0.4c18.2 0 33-14.7 33-32.9s-14.8-32.9-33-32.9c-1 0-2.1 0.1-3.1 0.1h-181c-35.3 0-64-28.7-64-64 0-5.5 0.7-10.9 2-16L234 498.9l0.2-0.1c6.7-28.1 31.9-49 62.1-49.1l0.2-0.1h532.2c1.3-0.1 2.5-0.1 3.8-0.1 35.3 0 64 28.7 64 64 0 6.7-1.1 13.3-3 19.4v0.1L821 812.8c-0.1 0.6-0.3 1.1-0.4 1.7l-1.5 5.8-0.5 0.4c-1.5 3.9-3.4 7.5-5.5 11h-1.3c-2.6 4.7-5.8 9.1-9.5 12.9-11.4 10.6-26.7 17.1-43.4 17.1-1.3 0-2.6 0-3.8-0.1h-80.8c-1-0.1-2.1-0.1-3.1-0.1-18.2 0-33 14.7-33 32.9s14.8 32.9 33 32.9v0.2H763l0.5-0.4c59.1-0.2 108.7-40.4 123.2-95l0.2-0.2 67.8-285.5c2.9-10.8 4.5-22.1 4.5-33.8-0.1-59.5-40.5-109.5-95.2-123.9z m-571.5-4.9c-62 0-113.7 44.2-125.5 102.7l-0.5 0.4-38 160.3V257c0-35.3 28.7-64 64-64H383l82.7 111.3c6.6 11.4 19.2 17.2 31.5 15.8h238.5c35.2 0 63.8 28.5 64 63.7H292.5z"
							:fill="fileActive ? '#50abf8' : '#4F4F4F'"
							p-id="5802"
						></path>
					</svg>
				</div>
			</el-upload>
		</div>
		<div
			class="message-input"
			ref="messageInputRef"
			contenteditable="true"
			spellcheck="false"
			autofocus
			@input="handleInput"
			@paste="handlePaste"
			@keydown="handleInputKeyDown"
		></div>
		<el-tooltip class="box-item" effect="light" placement="top-end" :popper-class="'send-text'">
			<template #content>
				<span> Shift + Enter 换行 </span>
				<span> Enter 发送 </span>
			</template>
			<el-button color="#4a89fc" class="send-message-btn" @click.stop="handleSendMsg"> 发送 </el-button>
		</el-tooltip>
	</div>
</template>
<script setup lang="ts">
import useUpload from '@/hooks/upload'
import utils from '@/utils'

const emits = defineEmits(['handleSendMessage'])
const { proxy } = getCurrentInstance()
// 自定义输入框子节点元素列表
const childNodes = ref<any>([])
const message = ref<string>('')
const messageInputRef = ref<HTMLDivElement>(null)

// emoji图标是否选中
let emojiActive = ref<boolean>(false)
// emoji组件是否打开
let emojiFlag = ref<boolean>(false)

// emoji组件展示
const handleEmoji = () => {
	emojiActive.value = true
	emojiFlag.value = true
}
// 处理emoji组件隐藏
const handleHide = () => {
	emojiActive.value = false
	emojiFlag.value = false
}

// 处理emoji选择事件
const handleSelectEmoji = (val: number) => {
	// 聚焦
	// 没有焦点就获取输入框焦点
	if (document.activeElement != messageInputRef.value) {
		messageInputRef.value.focus()
	}
	const emojiImg = `<img src="./gif/${val}.gif" width="25" height="25" style="vertical-align: middle">`
	document.execCommand('insertHTML', false, emojiImg)
	// document.execCommand('insertImage', false, `./gif/${val}.gif`)
	console.log(message.value)
}

// 文本输入事件
const handleInput = (e: Event) => {
	childNodes.value = (e.target as HTMLInputElement).childNodes
	message.value = (e.target as HTMLInputElement).innerHTML
}
// 粘贴事件
const handlePaste = (e) => {}
// 回车事件
const handleInputKeyDown = (e) => {
	if (e.keyCode === 13 && e.shiftKey) {
		return
	} else if (e.keyCode === 13) {
		e.preventDefault()
		handleSendMsg()
	}
}
// 发送消息事件
const handleSendMsg = () => {
	if (!message.value || message.value.length > 2000) {
		utils.msg(message.value.length > 2000 ? '你发的小作文不能超过2000字' : '内容不能为空', 'warning')
	}
	let text = message.value
	let reg = /(http:\/\/|https:\/\/|www\.)((\w|=|\?|\.|\/|&|-)+)/g
	// 链接处理后的结果
	let message_res = text.replace(reg, (arg: string) => {
		let cur_str = arg
		if (arg.indexOf('http') == -1 && arg.indexOf('https') == -1) {
			cur_str = 'http://' + arg
		}
		return `<a href="${cur_str}" target="_blank" style="text-decoration: underline; cursor: pointer; color: inherit;">${arg}</a>`
	})
	// 默认消息类型
	const msgType = 0
	// 触发发送消息回调
	emits('handleSendMessage', message_res, msgType)
	// 清空消息
	message.value = ''
	messageInputRef.value.innerHTML = ''
	messageInputRef.value.focus()
}

const { handleFileUpload, handleUploadError, handleExceed } = useUpload(proxy)
// 文件(大文件)上传图标是否选中
const fileActive = ref<boolean>(false)
// 文件(大文件)上传组件是否打开
const fileFlag = ref<boolean>(false)
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	position: relative;
}
.message-input {
	width: 100%;
	height: 100%;
	word-break: break-all;
	overflow: auto;
}
.send-message-btn {
	width: 50px;
	height: 30px;
	margin-left: auto;
	color: #ffffff;
}

.top-icon {
	width: 100%;
	display: flex;

	.icon-box {
		margin-right: 10px;
		cursor: pointer;
	}
}
</style>

<style>
.send-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 110px;
	padding: 5px;
	background-color: var(--message-send-btn-tips-bg-color);
	color: var(--message-send-btn-tips-color);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
</style>
